<template>
	<view class="contact"> 
		<swiper :current="currentIndex" class="item">
			<swiper-item>
				<view class="auto">
					<view class="top">
						<view class="top-top">
							<view class="left">
								<view class="div-img">
									<image class="img"
										src="https://ts2.cn.mm.bing.net/th?id=ODLS.33c3ee46-c30f-45e9-90e4-cb41db8e5954&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2"
										alt="" />
								</view>
								<view class="div-txt">
									<text>黑天鹅BLACKSWAN</text>
								</view>

							</view>
							<view class="right" >
								<image  @click="dianji" class="right-img" src="/static/my-img/info.png" alt="" />
							</view>
								</view>
						<view class="top-bottom">
							<text class="bottom-txt">申请获取并验证你的手机号</text>
							<text class="bottom-txt1">方便您快速填写手机号</text>
						</view>
					</view>
					<view class="bottom">
						<view class="bottom-top" @click="submitt">
							<text class="txt">{{numAutons}}</text>
							<text class="txt1">微信绑定号码</text>
						</view>
						<view class="bottom-bottom" @click="$emit('noclose')">
							<text class="txt">不允许</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="ill">
					<view class="ill-top">
						<image @click="fanhui" class="img" src="/static/my-img/向左.png" mode=""></image>
						<text class="top-txt">第三方用户信息授权说明</text>
					</view>
					<view class="ill-bottom">
						<text>你授权后，小程序开发者将收集你的手机号，为你提供相关服务。开发者严格按照《黑天鹅BLACKSWAN小程序隐私保护指引》处理你的个人信息，如你发现开发者不当处理你的个人信息，可进行投诉。</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "my-info-autons",
		props:{
			data:String
		},
		data() {
			return {
				currentIndex: 0,
				numAutons: "199****2762"
				
			};

		},
		methods: {
			submitt() {
				// this.num="19982652762"
				this.$emit("changeNums",19982652762)
				this.$emit("noclose")
			},
			dianji() {
				this.currentIndex = 1
					// this.$emit("dianji")
			},
			fanhui() {
				this.currentIndex = 0
					// this.$emit("fanhui")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contact {
		background-color: #fafafa;
		border-radius: 30rpx 30rpx 0 0;
		height: 600rpx;
		width: 100%;

		// border: 1rpx solid red;
		.item {
			height: 100%;

			.auto {
				// border: 1rpx solid blue;
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;

				.top {
					width: 100%;
					height: 40%;
					// border: 1rpx solid red;
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;

					.top-top {
						height: 40%;
						width: 90%;
						// border: 1rpx solid yellow;
						display: flex;
						justify-content: space-between;
						margin-top: 20rpx;
						margin-left: 5%;

						// margin-bottom: 10rpx;
						.left {
							display: flex;
							justify-content: center;
							align-content: center;

							.div-img {
								width: 70rpx;
								height: 70rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #fff;
								border-radius: 50%;

								.img {
									width: 64rpx;
									height: 64rpx;
								}
							}

							.div-txt {
								display: flex;
								margin-top: 15rpx;
								margin-left: 20rpx;
								font-size: 30rpx;
								font-weight: bold;
							}

						}

						.right {
							// border: 1rpx solid rebeccapurple;
							.right-img {
								width: 50rpx;
								height: 50rpx;
							}
						}

					}

					.top-bottom {
						width: 90%;
						height: 30%;
						margin-left: 5%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.bottom-txt {
							font-weight: 600;
							font-size: 35rpx;
							letter-spacing: 1rpx;
							margin-bottom: 20rpx;
						}

						.bottom-txt1 {
							font-size: 30rpx;
							color: #a7a7a7;
							letter-spacing: 2rpx;
						}
					}
				}

				.bottom {
					// border: 1rpx solid green;
					height: 50%;
					width: 100%;
					display: flex;
					flex-direction: column;

					.bottom-top {
						width: 80%;
						height: 40%;
						margin-left: 10%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-bottom: 30rpx;
						background-color: #fff;
						border-radius: 30rpx;

						.txt {
							font-size: 30rpx;
						}

						.txt1 {
							font-size: 25rpx;
							color: #cacaca;
						}
					}

					.bottom-bottom {
						width: 80%;
						height: 40%;
						margin-left: 10%;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #fff;
						border-radius: 30rpx;

						.txt {
							font-size: 30rpx;
							letter-spacing: 1rpx;
						}
					}
				}

			}
		}

		.ill {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;

			.ill-top {
				width: 94%;
				margin-left: 3%;
				margin-top: 20rpx;
				display: flex;
				// justify-content: center;
				align-items: center;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin-right: 130rpx;
				}

				.top-txt {
					letter-spacing: 2rpx;
					font-weight: 600;
					font-size: 30rpx;
				}
			}

			.ill-bottom {
				width: 94%;
				margin-left: 3%;
				margin-top: 40rpx;
				font-size: 25rpx;
				color: #a3a3a3;
				letter-spacing: 1rpx;
				line-height: 50rpx;
			}
		}
	}
</style>